<!--
 * @Author: panda
 * @Date: 2022-05-18 10:22
 * @Description: 上传图片组件
-->
<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :limit="limit"
    accept=".jpg,.jpeg,.png"
    :http-request="httpRequest"
    :on-success="onUploadSuccess"
    :on-remove="handleRemove"
    :on-error="onUploadError"
    :on-preview="handlePictureCardPreview"
    :on-exceed="handleExceed"
    :on-progress="onUploadProgress"
    :file-list="fileList!==undefined?fileList:[]"
  >
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script lang="ts">
import {defineComponent, ref, watch,} from 'vue'
import {Plus} from '@element-plus/icons-vue'
import type {UploadFile, UploadProps} from 'element-plus'
import { upload} from "@/utils/cos";
import {ElMessageBox, UploadUserFile,} from "element-plus/es";
import {UploadProgressEvent} from "element-plus/es/components/upload/src/upload";

export default defineComponent({
  components: {
    Plus
  },

  props: {
    coverUrl: String,
  },
  // 回传父组件，图片url
  emits: ['fileUrl'],
  setup(props, context) {
    // 点击放大图片
    const dialogImageUrl = ref('')
    // 放大图片弹窗是否显示
    const dialogVisible = ref(false)
    //限制上传数量
    const limit = ref(1)

    // 上传图片方法，请求
    const httpRequest = upload
    // 获取文件名，为删除对象存储文件，作准备
    const fileKey = ref('')
    // 图片展示列表
    const fileList = ref<UploadUserFile[]>([])
    // 移除图片
    const handleRemove: UploadProps['onRemove'] = () => {
      ElMessageBox.confirm(
        '资源将被永久删除，确认删除？',
        '警告',
        {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // deleteObject(fileKey.value)
      })
    }
    // 图片预览
    const handlePictureCardPreview = (file: UploadFile) => {
      dialogImageUrl.value = file.url!
      dialogVisible.value = true
    }
    const onUploadProgress = (evt: UploadProgressEvent) => {
      console.log(evt)
    }
    //上传成功回调函数
    const onUploadSuccess: UploadProps['onSuccess'] = (
      response
    ) => {
      console.log(fileList)
      console.log("success")
      //为删除图片作准备
      const key = response.toString().split("/")
      fileKey.value = key[3] + '/' + key[4]
      // 返回链接
      context.emit('fileUrl', response)
    }
    //上传失败回调函数
    const onUploadError = () => {
      ElMessageBox.alert('请重新登陆再上传。', '错误提示', {
        confirmButtonText: '好的',
      })
    }
    //上传限制回调函数
    const handleExceed = () => {
      ElMessageBox.alert(`文件超过${limit.value}个！`, '错误提示', {
        confirmButtonText: '好的',
      })
    }
    // watch父组件传过来的视频封面链接
    watch(() => props.coverUrl, (cur) => {
      console.log(cur)
      const key = cur!.toString().split("/")
      fileKey.value = key[3] + '/' + key[4]
      // console.log(fileKey.value)
      //删掉默认图片列表空链接
      fileList.value.pop()
      //将视频封面加入图片列表
      fileList.value.push({name: '', url: cur})
    })


    return {
      dialogImageUrl,
      dialogVisible,
      limit, fileList, handleExceed, onUploadProgress,
      handleRemove, onUploadSuccess, onUploadError,
      handlePictureCardPreview, httpRequest,
    }
  }
})

</script>

